<template>
<div class="m-selecttable" v-click-outside="()=>isShowSelect=false">
    <el-input
        v-bind="$attrs"
        auto-complete="off"
        :value="valueTitle"
        @click.native="()=> isShowSelect=!isShowSelect"
        :placeholder="placeholder"
        :readonly="true"
        :clearable="clearable"
        @clear="clearHandle"    
    >
    </el-input>
    <i :class="[isShowSelect?'el-icon-arrow-up':'el-icon-arrow-down','icontip']"></i>
    <el-container class="m-table" :style="{width:tableWidth}" v-show="isShowSelect">
        <el-main>
            <el-table :data="data" style="width: 100%;" size="mini" class="jzb-table" highlight-current-row @row-click="clickRow">
                <slot name="column"></slot>
            </el-table>
        </el-main>
        <el-footer height="auto">
            <slot name="page"></slot>
        </el-footer>
    </el-container>
</div>
</template>
<script>
//示例
// <selectTable :data="comList" keyid="comId" label="comName" memo="systemName" v-model="comId"
//     tableWidth="500px" size="mini" @change="queryDataList">
//     <el-table-column slot="column" label="单位名称"></el-table-column>
//     <myPagination slot="page" @pageChange="initComList" :page="comPage"></myPagination>
// </selectTable>
export default {
    name:'el-select-table',
    props:{
        keyid:{type: String, default: 'id' }, //key
        label:{type: String, default: 'name' },  //label
        memo:{type: String, default: 'memo' },  //当label取不到值时取memo
        data:{ type: Array, default: [] }, // 选项列表数据
        value:{ type: String, default: '' },// 初始值
        tableWidth:{ type: String, default: '100%' },// table宽度
        placeholder:{ type: String, default: '请选择' },
        clearable:{ type:Boolean, default: true },// 可清空选项
    },
    data(){
        return {
            isShowSelect:false,
            valueId: null,
            valueTitle:'',
        };
    },
    watch:{
        value(newVal){
            this.valueId = newVal;   // 初始值
            this.initHandle(this.valueId);
        } 
    },
    mounted(){
        this.valueId = this.value;   // 初始值
        this.initHandle(this.valueId);
    },
    methods:{
        // 初始化值
        initHandle(){
            if(this.valueId){
                let obj = this.data.find(item=>item[this.keyid]===this.valueId);
                this.valueTitle = obj?obj[this.label]:'';
                if(obj&&!this.valueTitle) this.valueTitle = obj[this.memo]
            } 
        },
        // 清除选中
        clearHandle(){
            this.valueTitle = ''
            this.valueId = null
            this.$emit('input',null)
            this.$emit('change',null)
        },
        //选中行
        clickRow(row, column, event){
            this.valueId = row[this.keyid]
            this.valueTitle = row[this.label]||row[this.memo]
            this.$emit('input',this.valueId)
            this.$emit('change',this.valueId)
            this.isShowSelect=false;
        },
    },
};
</script>
<style lang="less" scoped>
.el-header,.el-main,.el-footer{padding: 0;position: relative;}
.jzb-table{
    thead th{background:#f4f4f4;color:#2D2F33;text-align:center;line-height:16px;padding:3px 0;border-style:solid dotted;border-color:#ccc;border-width:1px 1px 1px 0px;}
    tbody td{color:#5A5E66;font-size:12px;line-height:16px;border-right:1px dotted #ccc;border-bottom:1px dotted #ccc;padding:3px 0;}
}
.m-selecttable{display: inline-block;width:100%;position:relative;
    .m-table{ 
        position: absolute; left:0; top:100%; margin-top:1px; overflow: auto; 
        max-height: 300px; border: 1px solid #ddd; line-height: 1;  z-index: 204; 
    }
    .icontip{
        position: absolute;right:10px;top:50%;transform: translateY(-50%);background:#fff;color:#C0C4CC;
    }
}  
</style>